{namespace dce=ArminVieweg\Dce\ViewHelpers}
{namespace ngoos=Ngoos\ViewHelpers}
<f:layout name="Default"/>

<f:section name="main">
    <f:if condition="{field.style}">
        <f:then>
            <div class="c-layout-breadcrumbs-1 c-bgimage-full   c-fonts-uppercase c-fonts-bold   c-bg-img-center" style="background-image: url('{ngoos:uri.image(src:'uploads/pics/{field.images.0.image}', maxWidth:'1920', mobileMaxWidth:'414')}')">
                <div class="c-breadcrumbs-wrapper">
                    <div class="container">
                        <f:cObject typoscriptObjectPath="lib.navigation.breadcrumb" />
                    </div>
                </div>
            </div>
        </f:then>
        <f:else>
            <section class="c-layout-revo-slider c-layout-revo-slider-1">
                <div class="tp-banner-container tp-fullscreen tp-fullscreen-mobile">
                    <div class="tp-banner rev_slider" data-version="5.0">
                        <ul>
                            <f:for each="{field.images}" as="vo" iteration="itemIteration">
                                <f:if condition="{vo.video}">
                                    <f:then>
                                        <li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="300" data-thumb="">
                                            <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
                                            <f:if condition="{vo.image}">
                                                <img src="fileadmin/templates/v2/public/images/blank.png" alt="">
                                            </f:if>
                                            <!-- BACKGROUND VIDEO LAYER -->
                                            <div class="rs-background-video-layer fulllscreenvideo tp-videolayer" data-forcerewind="on" data-volume="mute" data-videowidth="100%" data-videoheight="100%" data-videomp4="uploads/pics/{vo.video}" data-videopreload="preload"
                                                 data-videoloop="loop" data-forceCover="1" data-aspectratio="16:9" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true"></div>
                                            <div class="tp-caption customin customout" data-x="center" data-y="center" data-hoffset="" data-voffset="-30" data-start="1000" data-transform_in="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;"
                                                 data-transform_out="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="600">
                                                <f:if condition="{vo.description}">
                                                    <h3 class="c-main-title c-font-55 c-font-bold c-font-center c-font-uppercase c-font-white c-block">
                                                        <f:format.html>{vo.description}</f:format.html>
                                                    </h3>
                                                </f:if>
                                            </div>
                                            <div class="tp-caption lf" data-x="center" data-y="center" data-voffset="130" data-speed="900" data-start="2000" data-transform_in="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;"
                                                 data-transform_out="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;">
                                                <f:if condition="{vo.link}">
                                                    <dce:typolink parameter="{vo.link}" class="c-action-btn btn btn-lg c-btn-square c-btn-border-2x c-btn-white c-btn-bold c-btn-uppercase">{vo.linktext}</dce:typolink>
                                                </f:if>
                                            </div>
                                        </li>
                                    </f:then>
                                    <f:else>
                                        <f:if condition="{vo.image}">
                                            <li data-transition="fade">
                                                <!-- MAIN IMAGE -->
                                                <ngoos:image src="uploads/pics/{vo.image}" maxWidth="1440" mobileMaxWidth="414"/>
                                                <!-- LAYER NR. 1 -->
                                                <div class="tp-caption customin customout" data-x="center" data-y="center" data-hoffset="" data-voffset="-30" data-start="1500" data-transform_in="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;"
                                                     data-transform_out="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="600">
                                                    <f:if condition="{vo.description}">
                                                        <h3 class="c-main-title c-font-55 c-font-bold c-font-center c-font-uppercase c-font-white c-block">
                                                            <f:format.html>{vo.description}</f:format.html>
                                                        </h3>
                                                    </f:if>
                                                </div>
                                                <!-- LAYER NR. 2 -->
                                                <div class="tp-caption randomrotateout" data-x="center" data-y="center" data-hoffset="" data-voffset="120" data-transform_in="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;"
                                                     data-transform_out="x:0;y:0;z:0;rX:0.5;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;skY:0;opacity:0;s:600;e:Power2.easeInOut;" data-start="2000" data-easing="Back.easeOut">
                                                    <f:if condition="{vo.link}">
                                                        <dce:typolink parameter="{vo.link}" class="c-action-btn btn btn-lg c-btn-square c-btn-border-2x c-btn-white c-btn-bold c-btn-uppercase"></dce:typolink>
                                                    </f:if>
                                                </div>
                                            </li>
                                        </f:if>
                                    </f:else>
                                </f:if>
                            </f:for>
                        </ul>
                    </div>
                    <!-- END REVOLUTION SLIDER -->
                </div>
                <!-- END OF SLIDER WRAPPER -->
            </section>
        </f:else>
    </f:if>
</f:section>